.timelinebox{
	width: 680px;
	height: 55px;
	position: relative;
	margin: 20px auto 10px;
}
.timebtn{
	position: absolute;
	top: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
	border:1px solid #cccccc;
	text-align: center;
	color: #cccccc;
	cursor: pointer;
}
.timebtn:hover{
	border:1px solid #2AACE2;
	color: #2AACE2;
}
.timebtn i{
	font-size: 28px;
}
.prevbtn{
	left: 0;
}
.nextbtn{
	right: 0;
}
.timelinewarper{
	margin: 0 40px;
	width: auto;
	overflow: hidden;
	height: 50px;
}
.timeline{
	height: 15px;
	border-bottom: 1px solid #cccccc;
}
.timeline>li{
	list-style: none;
	display: inline-block;
	width: 50px;
	height: 50px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
}
.timeline i{
	width: 20px;
	height: 20px;
	margin: 5px auto 10px;
	display: block;
	border-radius: 50%;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	position: relative;
}
.timeline i>b{
	width: 0px;
	height: 0px;
	position: absolute;
	top:50%;
	left: 50%;
	background-color: #2AACE2;
	display: block;
	border-radius: 50%;
	transition: all 0.5s;
	-moz-transition: all 0.5s;	/* Firefox 4 */
	-webkit-transition: all 0.5s;	/* Safari 和 Chrome */
	-o-transition: all 0.5s;
}
.timeline>li:hover{
	color: #2AACE2;
}
.timeline>li:hover i{
	border-color: #2AACE2;
}
.timeline>li:hover i>b{
	width: 14px;
	height: 14px;
	margin-left: -7px;
	margin-top: -7px;
}
.timeline>li.active{
	color: #2AACE2;
}
.timeline>li.active i{
	border-color: #2AACE2;
}
.timeline>li.active b{
	width: 14px;
	height: 14px;
	margin-left: -7px;
	margin-top: -7px;
}

.charts{
	width: 1100px;
	margin: 10px auto;
}
.mainchart{
	display: inline-table;
	width: 19%;
	height: 240px;
	vertical-align: middle;
	overflow: hidden;
}
.mainchart.active{
	display: inline-block;
	width: 24%;
	height: 300px;
}

#descchart{
	height: 240px;
}
.descitem{
	width: 50%;
	display: inline-block;
}
.descchart{
	padding: 20px;
}
.desctext{
	padding: 50px 20px 20px;
	width: 50%;
	margin-left: 60px;
}
.desctext h3{
	padding: 10px 0;
	font-size: 18px;
	color: #47A725;
	letter-spacing: 0.3em;
}
.desctext h3>b{
	display: inline-block;
	padding: 5px;
	border-radius: 50% 50% 50% 0;
	background-color: #47A725;
	color: #ffffff;
	letter-spacing: 0em;
	margin-right: 3px;
}
.desctext p{
	line-height: 175%;
}
.mainview .arrowdown{
	position: absolute;
	left: 50%;
	bottom: -5px;
	height: 20px;
	width: 31px;
	margin-left: -15px;
	background: url(../img/arrow.png) no-repeat 0 0;
}
.mainview .arrowup{
	position: absolute;
	left: 50%;
	top: -16px;
	height: 16px;
	width: 31px;
	margin-left: -15px;
	background: url(../img/arrow.png) no-repeat 0 -21px;
}

header{
	/*background-image: -webkit-linear-gradient(top,#666,#444);
  background-image: -moz-linear-gradient(top,#666,#444);
  background-image: -ms-linear-gradient(top,#666,#444);
  background-image: linear-gradient(top,#666,#444);*/
  background: #fff;
  height: 60px;
  min-width: 1155px;
  position: relative;
  width: 100%;
}
.subview{
	width: 1200px;
	border: 0;
}
.minichart{
	width: 216px;
	height: 246px;
	margin: 0 15px 15px;
	display: inline-block;
	background-color: #fff;
	box-shadow: 1px 0 5px rgba(0,0,0,0.3);
}
.linefirst{
	margin-left: 0;
}
.lineend{
	margin-right: 0;
}
.minichart svg{
	margin-left: 15px;
}
.subview-box,.subview-space{
	float: left;
	height: 240px;
	overflow: hidden;
	margin-bottom: 20px;
}
.subview-box{
	width: 285px;
	background-color: #fff;
	box-shadow: 1px 0 5px rgba(0,0,0,0.3);
}
.subview-title-warp{
	height: 35px;
	line-height: 35px;
	background-color: #F9F9F9;
	border-bottom: 1px solid #E7E7E7;
	position: relative;
}
.subview-title-warp .title{
	padding-left: 10px;
	cursor: pointer;
}
.subview-title-warp .opts{
	position: absolute;
	width: auto;
	height: 100%;
	top: 0;
	right: 5px;
}
.subview-title-warp .opts span{
	display: inline-block;
	width: 20px;
	height: 100%;
	color: #A7A7A7;
	cursor: pointer;
}
.subview-title-warp .opts span:hover{
	color: #000000;
}
.subview-cont-warp{
	width: 100%;
	height: 205px;
}
.subview-space{
	width: 20px;
}
.mainview.hidden{
	display: none;
}
.mainview.visbile{
	display: block;
}

#subchart-7{
	background: url(../img/Snip20151211_2.png) no-repeat center;
}
#leve2-2{
	background: url(../img/Snip20151211_3.png) no-repeat center;
}
.child-chart-warp{
	display: inline-block;
}
.child-chart{
	height: 255px;
	width: 100%;
}
.mode-chart{
	width: 400px;
	height: 230px;
	display: inline-block;
}

.bg-white-boxshadow{
    background: #fff;
    box-shadow: 1px 0px 5px rgba(0,0,0,0.3);
    position: fixed;
}
.layui-layer-shade{
    height: 100%;
    width: 100%;
    top: 0;
    position: fixed;
    left: 0;
}
.tempChartWrap{
    width: 49%;
    height: 360px;
    &.fl{
        float: left;
    }
    &.fr{
        float: right;
    }
}

.tw-mapStyle{
//	background: #1d306d;
	height: auto;
	position: relative;
	.tw-chart-wrap{
	    height: auto;
	}
	.header{
//	    background: #1d306d;
	    h1{
	        padding: 0;
	    }
	    .quit-tool .user-item.user-name{
	        position: relative;
//	        width: 220px;
	        span.welcome{
                height: 35px;
                line-height: 35px;
                float:left;
            }
            span.logininfo{
                height: 35px;
                line-height: 35px;
            }
	    }
	    .quit-tool .user-item.user-quit{
//	        background: #192a60;
	    }
	}
	.container{
	    .layoutView{
            margin: 15px 0;
            position: relative;
            background: #eceef2;
            .tv-left{
                width: 100%;
                background: #eceef2;
            }
            .tv-body{
                background: #eceef2;
                padding: 20px;
                .tw-tabMap{
                    height: 42px;
                    display: inline-block;
                    min-width: 300px;
                    ul{
                        height: 100%;
                        li{
                            height: 100%;
                            width: 100px;
                            float: left;
                            position: relative;
                            span{
                                display: none;
                            }
                            a{
                                display: inline-block;
                                height: 100%;
                                width: 100%;
                                color: #808080;
                                font-size: 18px;
                                line-height: 42px;
                                text-align: center;
                            }
                            &.on{
                                background: #fff;
                                .topline{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    height: 3px;
                                    width: 100%;
                                    display: block;
                                    background: #58b0e8;
                                }
                            }
                        }
                    }
                }
            }
            .tv-body .map-boxWrap{
                background: #fff;
                height: auto;
                .map-charWrap{
                    width: 50%;
                    min-height: 415px;
                    .mapChart{
                        min-height: 415px;
                    }
                }
                .map-paiming{
                    width: 50%;
                    height: auto;
                    margin-bottom: 10px;
                    .tw-htitle{
                        margin: 5px;
                        border-radius: 5px;
                        background: #eceef2;
                        height: 42px;
                        line-height: 42px;
                        text-indent: 15px;
                        cursor: pointer;
                        .icon{
                            width: 42px;
                            height: 42px;
                            display: block;
                            float: right;
                            background: url(../img/map_small_icon.png) no-repeat;
                            background-position: -22px -14px;
                        }
                        &.on .icon{
                            background-position: -22px -86px; 
                        }
                        &.on{
                            margin-bottom: 0;
                            border-bottom-left-radius: 0;
                            border-bottom-right-radius: 0;
                        }
                    }
                    .tw-chart-area{
                        min-height: 415px;
                        display: none;
                        margin-left: 5px;
                        margin-right: 5px;
                        border: 2px solid #eceef2;
                        border-top: 0;
                        border-bottom-left-radius: 5px;
                        border-bottom-right-radius: 5px;
                        &.active{
//                          display: block;
                        }
                        .tw-chart-div{
                            height: 100%;
                            min-height: 415px;
                        }
                    }
                }
            }
            
	    }
	}
	.tw-mapMenu{
	    height: 36px;
	    background: #3b6bbf;
	    ul{
	        height: 100%;
	        li{
	            float: left;
	            height: 100%;
	            line-height: 36px;
	            position: relative;
	            padding-left: 20px;
	            padding-right: 20px;
	            span{
	                width: 36px;
	                height: 36px;
	                display: block;
	                float: left;
	                color: #fff;
	                background: url(../img/mapmenu_iconlist.png) no-repeat;
	                &.online{
	                    display: none;
	                }
	            }
	            .icon-home{
	                background-position: 0px -20px;
	            }
	            .icon-guage{
	                background-position: 0px -94px;
	            }
	            .icon-report{
	                background-position: 0px -165px;
	            }
	            .icon-map{
	                background-position: 0px -228px;
	            }
	            .icon-area{
	                background-position: 0px -295px;
	            }
	            .icon-query{
	                background-position: 0px -362px;
	            }
	            a{
	                color: #fff;
	            }
	            &.on{
	                background: #29ace2;
	                .online{
	                    display: block;
	                    position: absolute;
	                    bottom: 0;
	                    left: 0;
	                    height: 4px;
	                    width: 100%;
	                    background: #ffab26;
	                }
	            }
	        }
	    }
	}
	footer{
	    color: #333;
	}
	
	#jqContextMenu ul{
	    li{
            height: 22px;
            line-height: 22px;
	    }
	    li span.icon{
	        display: block;
	        float: left;
	        width: 22px;
	        height: 22px;
	        line-height: 22px;
	        background: url(../img/map_right_menu.png) no-repeat;
            padding-right: 4px;
	    }
	    #joinDB .icon{
	        background-position: -15px -17px;
	    }
        #returnDB .icon{
            background-position: -15px -113px;
        }
        #enterDB .icon{
            background-position: -15px -192px;
        }
	}
	
	.tw-contrainWrap{
        position: fixed;
        right: 0;
        top: 0;
	}
	.tw-right-mark{
	    position: fixed;
	    right: 0;
	    top: 15%;
	    width: 36px;
	    height: 69px;
	    margin-top: -35px;
	    cursor: pointer;
	    background: url(../img/rihgt-open-icon-off.png) no-repeat;
	}
	.tw-right-mark:hover,.tw-right-mark.open{
        position: fixed;
        right: 0;
        top: 15%;
        width: 87px;
        height: 69px;
        margin-top: -35px;
        cursor: pointer;
        background: url(../img/rihgt-open-icon.png) no-repeat;
    }
    .tw-alertPage{
        position: absolute;
        right: 81px;
        top: 20px;
        width: 320px;
        min-height: 300px;
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        z-index: 666;
        border: 1px solid #ddd;
        .toper{
            height: 40px;
            padding: 0 10px;
            background: #eee;
            border-bottom: 1px solid #ddd;
            .title{
                line-height: 40px;
            }
        }
        .selectedAreas{
            padding: 10px;
            border-bottom: 1px solid #ddd;
            .item{
                float: left;
                background: #fafbfc;
                border: 1px solid #8cc2d9;
                padding: 4px 6px;
                margin-left: 10px;
                margin-bottom: 5px;
                span{
                    display: block;
                    float: left;
                    min-width: 24px;
                    height: 24px;
                    line-height: 24px;
                }
                .del{
                    background: url(../img/del825.png) no-repeat center;
                    cursor: pointer;
                }
            }
        }
        .header{
            height: 40px;
            padding: 0 10px;
            background: #fff;
            border-bottom: 1px solid #ddd;
            .title{
                line-height: 40px;
            }
            .btn{
                line-height: 40px;
                float: right;
                cursor: pointer;
                width: 69px;
                background: url(../img/btn284.png) no-repeat center;
                color: #fff;
                text-indent: 30px;
            }
        }
        .bodyer{
            padding: 0 10px;
            label{
                display: block;
                width: 100%;
                height: 24px;
                line-height: 24px;
                margin: 4px 0px;
                input{
                    vertical-align: baseline;
                }
                span{
                    height: 24px;
                    line-height: 24px;
                }
            }
        }
    }
    
    .JQ_outLayer{
        height: 42px;
        position: relative;
        .left{
            position: absolute;
            left: -20px;
            top: 9px;
            width: 24px;
            height: 24px;
            background: url(../img/left_right_arrow.png) no-repeat center;
            background-position: -24px -134px;
            cursor:pointer;
            &:hover{
                background-position: -25px -31px;
            }
        }
        .right{
            position: absolute;
            right: -20px;
            top: 9px;
            width: 24px;
            height: 24px;
            background: url(../img/left_right_arrow.png) no-repeat center;
            background-position: -24px -76px;
            cursor:pointer;
            &:hover{
                background-position: -23px -179px;
            }
        }
        .tw-tabMap{
            height: 45px;
            display: inline-block;
            width: 600px;
            max-width: 600px;
            overflow: hidden;
            position: relative;
            ul{
                width: auto;
                white-space:nowrap;
                position: absolute;
                top: 0;
                left: 0;
                li{
                    height: 100%;
                    display:inline-block;
                    *display: inline;
                    position: relative;
                    border-bottom: 1px solid #ddd;
                    padding: 0px 6px;
                    span{
                        display: none;
                    }
                    a{
                        display: inline-block;
                        height: 100%;
                        width: 100%;
                        color: #808080;
                        font-size: 14px;
                        line-height: 42px;
                        text-align: center;
                    }
                    &.on{
                        background: #fff;
                        border-bottom: 1px solid #fff;
                        border-left: 1px solid #ddd;
                        border-right: 1px solid #ddd;
                        .topline{
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 3px;
                            width: 100%;
                            display: block;
                            background: #58b0e8;
                        }
                    }
                }
            }
        }
        .tw-tabBody{
            min-height: 450px;
            overflow-y: auto;
            max-height: 450px;
            position: relative;
            .botBody{
                min-height: 400px;
            }
            .fa{
                display: block !important;
                position: absolute;
                top:0;
                right: 130px;
                cursor: pointer;
                color: #ddd;
                font-size: 18px;
                &.fa-table{
                    right: 100px;
                }
                &:hover,&.on{
                    color: #333;
                }
            }
        }
    }
    .layui-layer-dialog .layui-layer-content{
        overflow: hidden;
    }
    .tw-zcg,.tw-change{
        cursor: pointer;
    }
    .tbOn table{
        width: 100%;
        margin-top: 25px;
        tr th{
            font-weight: bold;
            text-align: center;
            padding: 3px 6px;
            border:1px solid #ddd;
            background: #d8f7f9;
        }
        tr td{
            text-align: center;
            padding: 3px 6px;
            border:1px solid #ddd;
        }
    }
}
